<template>
  <div>
    <div class="vip">
    <div class="vipContainer">
      <div class="viplist" :class="{active1:num===1}" to="/vip/vipselect" @click="chang(1)">精选</div>
      <div class="viplist" :class="{active:num===2}" to="/vip/vipstory" @click="chang(2)">看故事</div>
      <div class="viplist" :class="{active:num===3}" to="/vip/vipinfo" @click="chang(3)">涨知识</div>
      <!-- <div class="viplist" :class="{active1:num===4}" to="/vip/vipwell" @click="chang(4)">领福利</div> -->
    </div>
    </div>
      <Router-view></Router-view>
  </div>
</template>

<script>
export default {
  name: "Vip",
  data(){
      return {
         num:1
      }
  },
  methods:{
      chang (type){
            this.num = type
            if(type===1){
              this.$router.push('/vip/vipselect')
            }else if(type===2){
              this.$router.push('/vip/vipstory')
            }else if(type===3){
              this.$router.push('/vip/vipinfo')
            }else{
              this.$router.push('/vip/vipwell')
            }
      }

  },
};
</script>

<style lang="less" scoped>
.vip {
  width: 100%;
  border-bottom: 1px solid #eee;
}
.vipContainer{
  width: 70%;
  display: flex;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
  .viplist {
    // width: 25%;
    flex: 1;
    height: 24px;
    margin-top: 14px;
    display: inline-block;
    margin-top: 5px;
    font-size: 15px;
    color: #333;
    text-align: center;
    font-weight: 600;
    line-height: 1.6;
    &.active{
      transform: scale(1.2);
      color: #DDD771;
      &::after{
        content: '';
        position: absolute;
        width: 12px;
        height: 3px;
        border-radius: 30%;
        background-color: #D7BA5E;
        top: 28px;
        left: 26px;
      }
    }
    &.active1{
     transform: scale(1.2);
      color: black;
     &::after{
        content: '';
        position: absolute;
        width: 12px;
        height: 3px;
        border-radius: 30%;
        background-color: #D7BA5E;
        top: 28px;
        left: 26px;        
      }
    }
  }
}
</style>
